<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div {
            display: none;
        }

        .nn {
            display: block;
        }
    </style>
</head>


<body>
    <div style="width:500px;height:500px;margin:5% auto;border:1px solid;position: relative;">
        <div style="width:100%;height:40px;background:#eee;">
            <div class="d" style="width:50px;height:100%;float:left;background:skyblue;color:white;">1</div>
            <div class="d" style="width:50px;height:100%;float:left;background:yellowgreen;color:white;">2</div>
            <div class="d" style="width:50px;height:100%;float:left;background:brown;color:white;">3</div>
        </div>
        <div class="div "
            style="width:100%;height:460px;background:skyblue;z-index: 1;position:absolute;left:0;top:40;">
        </div>
        <div class="div"
            style="width:100%;height:460px;background:yellowgreen;z-index: 0;position:absolute;left:0;top:40;">
        </div>
        <div class="div" style="width:100%;height:460px;background:brown;z-index: 0;position:absolute;left:0;top:40;">
        </div>
    </div>
</body>

</html>
<script>
    var divs0 = document.querySelectorAll('.d');
    var divs = document.querySelectorAll('.div');

    // 自学 forEach
    divs0.forEach(function (item, index) {
        // console.log(item, index);

        item.index = index;
        item.onclick = function () {
            divs.forEach(function (item, index) {
                // 循环清除原有的class 会把通过class名获取的div标签也清除掉,所以需要添加一个div
                item.className = 'div';
            });
            // 这个也需要添加原有的class名称  加上新的class名
            divs[this.index].className = 'div nn';
        };
    });
</script>